<template>
  <el-row :gutter="20" class="top">
		<el-col :span="4">
			<img src="~assets/img/logo.png" alt="" class="logo">
		</el-col>
		<el-col :span="10">
			<nav-tab-top :title="topTitle" class="topTab" indexName="navTopIndex"
			:routes="topRoutes"></nav-tab-top>
		</el-col>
		<el-col :span="10">
			<el-row :gutter="10">
				<el-col :span="12">
					<search class="search"></search>
				</el-col>
				<el-col :span="6">
					<a class="login" href="#">登录</a>
				</el-col>
				<el-col :span="6">
					<a class="register" href="#">注册</a>
				</el-col>
			</el-row>
		</el-col>
  </el-row>
</template>

<script>
	import navTabTop from 'components/tab/tab_big.vue'
	
	import search from 'components/common/search.vue'
  export default{
    name:'',
    data(){
      return {
        topTitle:['音乐','资讯','我的','图片','其他'],
				topRoutes:['music','news','my','pic','other'],
      }
    },
    methods:{
      
    },
    components:{
       navTabTop,search
    }
  }
</script>

<style scoped>
	.top{
		justify-content: center;
		height: var(--big-height);
		align-items: center;
	}
	.logo,.search,.login,.register{
		width: 100%;
		height: 100%;
	}
	.login,.register{
		color: white;
		background-color: var(--bcc-green);
		text-align: center;
		line-height: 47px;
		border-radius: 5%;
		font-size: var(--font-middle-size);
		transition: all 0.5s;
		display: inline-block;
	}
	.register{
		color: black;
		background-color: white;
		border: var(--border-grey);
	}
	.login:hover{
		background-color: var(--bcc-focus-green);
	}
	.register:hover{
		background-color: var(--bcc-grey);
	}
</style>
